<template>
  <div>
    <div class="activity_cont white_box">
      <div class="activity_det_tit">一、活动对象说明</div>
      <div class="activity_det_txt">
        本次活动的目标参与人数为：{{ activityInfo.max_participation }}人。活动开放对象为：{{activityInfo.taskDepartment.map(item =>
          item.department_name).join('、')}}，望大家积极报名参与。
      </div>
      <div class="activity_det_tit">二、活动简介说明：</div>
      <div class="activity_det_txt">
        {{ activityInfo.task_describe }}
      </div>
      <div class="activity_det_tit">三、前置测评任务：</div>
      <div class="activity_det_txt evaluation_txt">
        本次活动开展前，请完成以下测评任务：
      </div>
      <div class="evaluation_box">
        <div class="item_evaluation" v-for="(item, index) in activityInfo.taskRatingScale">
          <div class="dis_flex">
            <img :src="item.rating_scale_cover" alt="" class="evaluation_img" />
            <div class="dis_flex just_space_between flex1">
              <div>
                <div class="evaluation_txt">{{ item.rating_scale_name }}</div>
                <div class="state_show dis_flex">
                  <img src="@/assets/images/common/success_icon.png" alt="" v-if="item.result_id > 0"
                    class="evaluation_state_img">
                  <img src="@/assets/images/common/fail_icon.png" alt="" class="evaluation_state_imgs" v-else>
                  <div class="evaluation_state">{{ item.result_id > 0 ? '已完成' : '未完成' }}</div>
                </div>
              </div>
              <div class="evaluation_btn" @click="toEvaluation(item)">
                {{ item.result_id > 0 ? '查看报告' : '去测评' }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 活动时间安排 -->
    <div>
      <div class="head_label">
        <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
        <div class="label_txt">活动时间安排</div>
      </div>
      <div class="time_box white_box">
        <!-- 报名阶段 -->

        <div class="item_arrange">
          <div class="stage_label stage_01">
            ▶ 报名阶段
          </div>
          <div class="activity_txt">起止时间：</div>
          <div class="dis_flex item_info">
            <div class="activity_time">{{ convertTimestampToDateTime(activityInfo.task_enroll_start_time) }}</div>
            <div class="time_division">--</div>
            <div class="activity_time">{{ convertTimestampToDateTime(activityInfo.task_enroll_end_time) }}</div>
          </div>
          <div class="audit_txt">(报名后需等待审核)</div>
          <div class="tips_info">
            <div class="tips_tit">注意事项：</div>
            <div class="tips_txt">{{ activityInfo.task_enroll_matters }}</div>
          </div>
        </div>
        <div class="item_arrange" v-if="activityInfo.task_is_sign == 1">
          <div class="stage_label stage_02">
            ▶ 签到阶段
          </div>
          <div class="activity_txt">起止时间：</div>
          <div class="dis_flex item_info">
            <div class="activity_time">{{ convertTimestampToDateTime(activityInfo.task_sign_start_time) }}</div>
            <div class="time_division">--</div>
            <div class="activity_time">{{ convertTimestampToDateTime(activityInfo.task_sign_end_time) }}</div>
          </div>
          <div class="tips_info">
            <div class="tips_tit">注意事项：</div>
            <div class="tips_txt">{{ activityInfo.task_sign_matters }}</div>
          </div>
        </div>
        <div class="item_arrange">
          <div class="stage_label stage_03">
            ▶ 实施阶段
          </div>
          <div class="activity_txt">起止时间：</div>
          <div class="dis_flex item_info">
            <div class="activity_time">{{ convertTimestampToDateTime(activityInfo.task_start_time) }}</div>
            <div class="time_division">--</div>
            <div class="activity_time">{{ convertTimestampToDateTime(activityInfo.task_end_time) }}</div>
          </div>
        </div>
      </div>
      <div class="">
        <div class="head_label">
          <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
          <div class="label_txt">具体实施方案</div>
        </div>
        <div class="white_box">
          <div> {{ activityInfo.task_scheme }}</div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { convertTimestampToDateTime } from "@/utils/time";
export default {
  props: {
    activityInfo: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {

    }
  },
  methods: {
    convertTimestampToDateTime,
    toEvaluation(item) {
      if (item.result_id > 0) {
        this.$router.push(`/activityReport?resultId=${item.result_id}`)
      } else {
        this.$router.push(`/normalAnswer?id=${item.rating_scale_id}&type=groupActivity&taskId=${item.task_id}&taskUserId=${this.activityInfo.id}`);
      }
    }
  }
}
</script>


<style lang="less" scoped>
.white_box {
  background: #ffffff;
  border-radius: 6.67px;
  padding: 16px 10px 25px 10px;
  margin: 10px;
}

.dis_flex {
  display: flex;
  align-items: center;
}

.just_space_between {
  justify-content: space-between;
}

.flex1 {
  flex: 1;
}

.activity_cont {
  padding: 20px 10px;
}

//标签
.head_label {
  display: flex;
  align-items: center;
  margin: 19px 0 19px 10px;
}

.label_img {
  width: 5.33px;
  height: 15.33px;
  margin-right: 11.33px;
}

.label_txt {
  font-weight: bold;
  font-size: 14.67px;
  line-height: 14.67px;
}

.activity_det_tit {
  font-weight: bold;
  font-size: 14.67px;
  line-height: 14.67px;
}

.activity_det_txt {
  font-size: 14px;
  color: #555555;
  line-height: 29.33px;
  text-indent: 2em;
  margin: 19px 0;
}

.evaluation_txt {
  text-indent: 0;
}

.stage_label {
  width: 320px;
  height: 33.33px;
  border-radius: 4.67px;
  color: #ffffff;
  font-size: 14.67px;
  line-height: 33.33px;
  padding-left: 8px;
}

.stage_01 {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #ff9500;
}

.stage_02 {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #29cca6;
}

.stage_03 {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), #2e8ae6;
}

.activity_txt {
  color: #333333;
  font-size: 14px;
  margin-top: 15.67px;
}

.item_info {
  margin-top: 13px;
}

.time_box {
  padding: 18px 10px;
}

.audit_txt {
  font-size: 14px;
  color: #ff9500;
  margin-top: 12.33px;
}

.tips_info {
  margin-top: 22.67px;
  font-size: 14px;
}

.tips_tit {
  margin-bottom: 18px;
  color: #333333;

}

.tips_txt {
  color: #555555;
  line-height: 28px;
}

.time_division {
  font-size: 14px;
  color: #000000;
  margin: 0 4px;
}

.activity_desc {
  color: #777777;
  font-size: 14px;
}

.item_arrange {
  margin-bottom: 24px;

  &:last-child {
    margin: 0;
  }
}

.footer_box {
  position: fixed;
  bottom: 0;
  left: 0;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  background: #fff;
}

.footer_txt {
  font-size: 14px;
  padding-left: 20px;
}

.footer_btn {
  width: 103.33px;
  height: 59.67px;
  line-height: 59.67px;
  text-align: center;
  color: #ffffff;
  font-size: 15.33px;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
}

.item_evaluation {
  border-bottom: 0.67px solid #dddddd;
  padding: 16px 0;

  &:last-child {
    border: 0;
  }
}

.evaluation_img {
  width: 40px;
  height: 40.67px;
  border-radius: 6px;
  margin-right: 9.33px;
}

.evaluation_txt {
  font-size: 14px;
  line-height: 14px;
}

.state_show {
  margin-top: 7px;
}

.evaluation_state_imgs {
  width: 15.33px;
  height: 15.33px;
}

.evaluation_state_img {
  width: 15.33px;
  height: 15.33px;
}

.evaluation_state {
  color: #000000;
  font-size: 12px;
  line-height: 12px;
  margin-left: 6px;
}

.evaluation_btn {
  width: 80px;
  height: 33.33px;
  line-height: 33.33px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  border-radius: 6.67px;
  color: #ffffff;
  font-size: 12.67px;
}

.time_box {
  padding: 18px 10px;
}

.activity_time {
  width: 150.33px;
  height: 33.33px;
  line-height: 33.33px;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
    #ffffff;
  border: 1px solid #999999;
  border-radius: 6.67px;
  font-size: 13.33px;
  text-align: center;
}

.time_division {
  font-size: 14px;
  color: #000000;
  margin: 0 4px;
}

.activity_desc {
  color: #777777;
  font-size: 14px;
}

.item_arrange {
  margin-bottom: 24px;

  &:last-child {
    margin: 0;
  }
}
</style>